<template>
  <div class="engineering-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <el-button icon="el-icon-arrow-left" @click="$router.go(-1)" class="back-btn">
        Back
      </el-button>
      <span class="page-title">工程页面</span>
    </div>

    <!-- 工程信息区 -->
    <div class="section engineering-info">
      <div class="section-title">工程信息</div>
      <div class="info-grid">
        <div class="info-item">
          <span class="info-label">工程编号</span>
          <span class="info-value">{{ engDetails.serialNumber || 'GC_20210001' }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">工程名称</span>
          <span class="info-value">{{ engDetails.name || '山西农大主体育场工程' }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">工程类型</span>
          <span class="info-value">{{ engDetails.type || '事业单位' }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">工程状态</span>
          <el-tag type="success" class="status-tag">{{ engDetails.status || '监测中' }}</el-tag>
        </div>
        <div class="info-item">
          <span class="info-label">开始时间</span>
          <span class="info-value">{{ engDetails.startTime || '' }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">结束时间</span>
          <span class="info-value">{{ engDetails.endTime || '' }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">地址</span>
          <span class="info-value">{{ engDetails.address || '甘肃省兰州市 undefined' }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">工程负责人</span>
          <span class="info-value">{{ engDetails.manager || '2' }}</span>
        </div>
      </div>
    </div>

    <!-- 绑定信息区域 -->
    <div class="section binding-info">
      <div class="section-header">
        <div class="section-title">绑定信息</div>
        <el-button type="primary" class="bind-btn" @click="handleBind">绑定</el-button>
      </div>

      <el-table :data="boundDevices" border class="devices-table">
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column prop="serialNumber" label="设备编号" width="140"></el-table-column>
        <el-table-column prop="name" label="设备名称" width="120"></el-table-column>
        <el-table-column prop="longitude" label="经度"></el-table-column>
        <el-table-column prop="latitude" label="纬度"></el-table-column>
        <el-table-column prop="videoUrl" label="视频地址"></el-table-column>
        <el-table-column prop="onlineStatus" label="在线状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.onlineStatus === '在线' ? 'success' : 'danger'">
              {{ scope.row.onlineStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140">
          <template slot-scope="scope">
            <el-button type="text" class="operation-btn unbind-btn" @click="handleUnbind(scope.row)">
              解绑
            </el-button>
            <el-button type="text" class="operation-btn offline-btn" @click="handleOffline(scope.row)">
              下线
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 绑定设备弹窗 -->
    <el-dialog title="绑定设备" :visible.sync="bindDialogVisible" width="50%">
      <div class="dialog-content">
        <el-form :model="formSave" label-width="80px">
          <el-form-item label="设备" prop="deviceId" required>
            <el-select v-model="formSave.deviceId" placeholder="Select">
              <el-option
                v-for="item in deviceOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="经度" prop="longitude" required>
            <el-input v-model="formSave.longitude" placeholder="请输入经度"></el-input>
          </el-form-item>
          <el-form-item label="纬度" prop="latitude" required>
            <el-input v-model="formSave.latitude" placeholder="请输入纬度"></el-input>
          </el-form-item>
          <el-form-item label="视频流" prop="videoUrl" required>
            <el-input v-model="formSave.videoUrl" placeholder="请输入视频流"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="bindDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirmBind">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 工程详情数据
      engDetails: {},
      // 已绑定设备列表
      boundDevices: [
        {
          serialNumber: 'DV_20210003',
          name: '三号设备',
          longitude: 103.698965,
          latitude: 36.090771,
          videoUrl: 'http://8.130.16.184/vw.mov',
          onlineStatus: '在线',
        },
      ],
      // 绑定设备弹窗显示状态
      bindDialogVisible: false,
      // 设备下拉选项
      deviceOptions: [
        { label: '设备1', value: 1 },
        { label: '设备2', value: 2 },
        { label: '设备3', value: 3 },
      ],
      // 绑定设备表单数据
      formSave: {
        deviceId: '',
        longitude: '',
        latitude: '',
        videoUrl: '',
      },
    };
  },
  created() {
    // 从路由参数获取工程详情
    this.engDetails = this.$route.query || {};
  },
  methods: {
    // 打开绑定设备弹窗
    handleBind() {
      this.bindDialogVisible = true;
      // 重置表单
      this.$nextTick(() => {
        this.formSave = {
          deviceId: '',
          longitude: '',
          latitude: '',
          videoUrl: '',
        };
      });
    },
    // 处理绑定确认
    handleConfirmBind() {
      // 这里可以添加表单验证逻辑
      if (!this.formSave.deviceId || !this.formSave.longitude || !this.formSave.latitude || !this.formSave.videoUrl) {
        this.$message.warning('请填写完整信息');
        return;
      }
      // 模拟添加新设备到已绑定列表
      const newDevice = {
        serialNumber: `DV_${new Date().getTime()}`,
        name: this.deviceOptions.find((item) => item.value === this.formSave.deviceId)?.label || '未知设备',
        longitude: this.formSave.longitude,
        latitude: this.formSave.latitude,
        videoUrl: this.formSave.videoUrl,
        onlineStatus: '在线',
      };
      this.boundDevices.push(newDevice);
      this.bindDialogVisible = false;
      this.$message.success('绑定成功');
    },
    // 处理解绑操作
    handleUnbind(device) {
      this.$confirm('确定要解绑该设备吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        // 执行解绑逻辑
        this.boundDevices = this.boundDevices.filter((item) => item.serialNumber !== device.serialNumber);
        this.$message({
          type: 'success',
          message: '解绑成功!',
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消解绑',
        });
      });
    },
    // 处理设备下线操作
    handleOffline(device) {
      this.$confirm('确定要让该设备下线吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        // 执行下线逻辑
        const index = this.boundDevices.findIndex((item) => item.serialNumber === device.serialNumber);
        if (index !== -1) {
          this.boundDevices[index].onlineStatus = '离线';
        }
        this.$message({
          type: 'success',
          message: '设备已下线!',
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消下线操作',
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.engineering-page {
  padding: 20px;
  background-color: #fff;
  min-height: 100vh;
}

// 页面头部样式 
.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;

  .back-btn {
    margin-right: 10px;
    color: #666;
    background: transparent;
    border: none;
    padding: 5px 10px;

    &:hover {
      background-color: #f5f5f5;
    }
  }

  .page-title {
    font-size: 18px;
    font-weight: 500;
    color: #333;
  }
}

// 通用区域样式 
.section {
  margin-bottom: 25px;
  border: 1px solid #eaeaea;
  border-radius: 4px;
  overflow: hidden;

  .section-title {
    font-size: 16px;
    color: #333;
    background-color: #f5f7fa;
    padding: 12px 20px;
    border-bottom: 1px solid #eaeaea;
    font-weight: 500;
  }
}

// 工程信息样式 
.engineering-info {
  .info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background-color: #eaeaea;
  }

  .info-item {
    padding: 15px 20px;
    background-color: #fff;
    display: flex;
    align-items: center;

    .info-label {
      width: 120px;
      color: #606266;
      font-weight: 500;
    }

    .info-value {
      flex: 1;
      color: #303133;
    }

    .status-tag {
      margin-left: 0;
    }
  }
}

// 绑定信息样式 
.binding-info {
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f5f7fa;
    padding: 12px 20px;
    border-bottom: 1px solid #eaeaea;
  }

  .bind-btn {
    height: 32px;
    padding: 0 15px;
  }

  .devices-table {
    width: 100%;
    margin: 0;
    border-radius: 0;
  }

  .operation-btn {
    padding: 0 5px;
    font-size: 14px;
  }
// 解绑按钮颜色
  .unbind-btn {
    color: #f56c6c;
  }
// 下线按钮颜色
  .offline-btn {
    color: #e6a23c;
  }
}

// 弹窗样式 
.dialog-content {
  padding: 20px 0;
}
</style>
